<template>
  <div id="home">
    <div class="top">
      <div class="block-div"></div>
      <div class="top-nav">
        <router-link to="/home/firstnav" replace><div class="nav first"  :class="{active: isActive === 1}" @click="firstclick()">模块1</div></router-link>
        <router-link to="/home/secondnav" replace><div class="nav second"  :class="{active: isActive === 2}" @click="secondclick()">模块2</div></router-link>
        <router-link to="/home/thirdnav" replace><div class="nav third"  :class="{active: isActive === 3}" @click="thirdclick()">模块3</div></router-link>
      </div>
      <div class="user">
        <div class="demo-basic--circle">
          <div class="block left avatar"><el-avatar :size="40"></el-avatar></div>
        </div>
        <el-dropdown>
          <span class="el-dropdown-link userinfo">
            <span>{{name}}</span>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item disabled>修改密码</el-dropdown-item>
            <el-dropdown-item ><div @click="isShow" >修改信息</div></el-dropdown-item>
            <el-dropdown-item ><div @click="quit">退出系统</div></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <edit ref="edit" :userInfo="userInfo"></edit>
    <keep-alive><router-view></router-view></keep-alive>
  </div>
</template>

<script>
import Edit from './HomeChild/Edit.vue'
import { getUserLoginInfo } from 'network/userinfo'
window.sessionStorage

export default {
  name:'Home',
  data() {
    return {
      path: 'home/firstnav',
      token: null,
      userInfo: {},
      name: null,
      isActive: 1,
    }
  },
  components: {
    Edit
  },
  created () {
    getUserLoginInfo().then( res => {
      const data = res.data;
      this.userInfo.address = data.address,
      this.userInfo.age = data.age,
      this.userInfo.cardNo = data.cardNo,
      this.userInfo.cardType = data.cardType,
      this.userInfo.name = data.name,
      this.name = data.name,
      this.userInfo.homePhone = data.homePhone,
      this.userInfo.wechat = data.wechat,
      this.userInfo.phone = data.phone,
      this.userInfo.sex = data.sex,
      this.userInfo.position = data.position.join(',')
      this.userInfo.department1 = data.department1.join(',')
      console.log(this.userInfo);
      })
  },
  activated () {
    this.$router.push(this.path)
  },
  methods: {
    isShow() {
      this.$refs.edit.isShow = !this.$refs.edit.isShow
    },
    quit() {
      sessionStorage.removeItem('token'),
      this.$router.push({path:'/login'});
    },
    firstclick() {
      this.isActive = 1
    },
    secondclick() {
      this.isActive = 2
    },
    thirdclick() {
      this.isActive = 3
    }
  },
}
</script>

<style lang="less" scoped>
  .home {
  width: 100%;
  height: 100%;
  position: relative;
  }
  .top {
    position: relative;
    height: 60px;
  }
  .top::after {
    clear: both;
  }
  .block-div {
    position: absolute;
    float: left;
    width: 24%;
    height: 100%;
    background-color: #005bab;
    border-radius: 0 35px 5px 0 ;
    z-index: 100;
  }
  .top-nav {
    position: relative;
    display: inline-block;
    height: 100%;
    width: 76%;
    top: 0;
    left: 22%;
    
  }
  .nav {
    width: 150px;
    height: 100%;
    padding-left: 10px;
    line-height: 60px;
    text-align: center;
    border-radius: 0 35px 5px 0 ;
    background-color: #fff;
  }
  .top-nav .first {
    position: absolute ;
    top: 0;
    left: 0;
    z-index: 55;
  }
  .top-nav .second {
    position: absolute;
    top: 0;
    left: 100px;
    z-index: 9;
  }
  .top-nav .third {
    position: absolute;
    top: 0;
    left: 200px;
    z-index: 1;
  }
  .active {
    background-color: #009fe8;
    color: #fff;
  }
  .user {
    position: absolute;
    top: 0;
    right: 5%;
    width: 80px;
    height: 100%;
  }
  .avatar {
    padding-left: 12px;
  }
  .userinfo {
    display: block;
    float: left;
    font-size: 12px;
    margin-top: -18px;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #333;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  
</style>